<template>
	<view class="out">
		<view class="swiper-container">
		        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" >
		            <swiper-item v-for="(item, index) in imgList" :key="index" transition-timing-function="cubic - bezier(0.1, 0.1, 0.1, 1)">
		                <image :src="item" mode="aspectFill"></image>
		            </swiper-item>
		        </swiper>
		</view>
		<view class="conteng">
		<text class="title">70年代六原菜馆</text>
		<view class="describe">		
			<image src="/static/images/5心.svg" class="heart" mode="aspectFit"></image>
			<text class="cord">4.5推荐</text>
		</view>			
		<view class="describe01">营业时间 09:00-21:00
		<text class="price">￥22/人|快餐></text>
		</view>	
		<view class="describe02">
			<text class="service01">卡座</text>
			<text class="service02">可停车</text>
			<text class="service03">Wi-Fi</text>
		</view>
		<view class="connection">
			<text class="adress">齐齐哈尔工程学院</text>
			<text class="phone">电话:123456789</text>
		</view>
		</view>
		<view class="conteng01">
			<text class="tuangou">优惠团购</text>
		<cardlist></cardlist>
		</view>
	</view>
</template>

<script>
	import cardlist from '/components/cardlist/cardlist.vue'
    export default {
		comments:{
			cardlist
		},
		data() {
			return {
				imgList: [
				    '/static/images/烤肉.jpg',
				    '/static/images/博物馆.jpg',
				    '/static/images/酒店7.jpg',
				    '/static/images/游乐园2.jpg'   
				]
			}
		}
	}
</script>
<style scoped>
	.swiper-container image{
		width: 100%;
		height: 100%;
	}
	.conteng{
		  border: 1rpx solid whitesmoke;
		  border-radius: 12rpx;
		  height:130px;
		  background-color: white;
		  font-family: "宋体";
		  line-height: 1.2;
	}
	.title{
		  font-weight: 5px;
		  font-size: 60rpx;
	}
	.describe{
		  margin-top: 15rpx;
		  display: flex;	  
	}
	.describe image{
		width: 100px;
		height: 30px;
	}
	.cord{
		  margin-top: 5rpx;
		  margin-left: 10rpx;
		  color: red;
	}
	.price{
		  margin-left: 200rpx;
		  margin-top: 5rpx;
		  color: gainsboro;
	}
	.describe01{
		  color: gray;
		  display: flex;
	}
	.describe02{
		  display: flex;
	}
	.connection{
		display: flex;
		font-size: 28rpx;
		font-family: "楷体";
	}
	.phone{
		margin-left: 60rpx;
	}
	.service01{
		  border: 1rpx solid gainsboro;
		  font-size: 30rpx;
	}
	.service02{
		  border: 1rpx solid gainsboro;
		  font-size: 30rpx;
		  margin-left:10rpx;
	}
	.service03{
		  border: 1rpx solid gainsboro;
		  font-size: 30rpx;
		  margin-left:10rpx;
	}
	.conteng01{
		  height: 800px;
		  margin-top: 30rpx;
		  border: 1rpx solid whitesmoke;
		  border-radius: 20rpx;
		  background-color: white;
	}
	.tuangou{
		  font-size: 40rpx;
	}
</style>
 